<template>
  <div>
    <search btn-text="添加电影" @searchMovie="searchMovie"></search>
    <table-info
      :tableList="tableList"
      :headList="headList"
      type="movie"
      @deleteMovieInfo="deleteMovieInfo"
      @updateMovieInfo="updateMovieInfo"
    ></table-info>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="8"
      @current-change="change"
    >
    </el-pagination>
    <dia-log></dia-log>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import DiaLog from './components/dialog.vue'
import {
  getCurrentPageMovie,
  deleteMovieInfo,
  addMovieInfo,
  updateMovieInfo
} from '@/api/movie'
export default {
  components: { DiaLog },
  data () {
    return {
      isAdd: true,
      headList: [
        { id: 1, label: '电影ID', prop: 'movie_id' },
        { id: 2, label: '电影ID', prop: 'name' },
        { id: 3, label: '导游', prop: 'director' },
        { id: 4, label: '类型', prop: 'type' },
        { id: 5, label: '上映时间', prop: 'public_date' }
      ],
      tableList: [],
      currentPage: 1,
      pageSize: 8,
      input: '',
      total: 0,
      isDialog: false,
      movieId: '',
      editObj: {}
    }
  },
  computed: {
    ...mapState('movie', ['ruleForm'])
  },
  async created () {
    await this.getCurrentPageMovie(this.currentPage, this.pageSize, this.input)
  },
  methods: {
    ...mapActions('movie', ['changeRuleForm']),
    // 初始化
    async getCurrentPageMovie (currentPage, pageSize, input) {
      const res = await getCurrentPageMovie({ currentPage, pageSize, input })
      this.tableList = res.data
      this.total = res.total
    },
    // 切换页码
    change (currentPage) {
      this.currentPage = currentPage
      this.getCurrentPageMovie(this.currentPage, this.pageSize, this.input)
    },
    // 删除电影
    async deleteMovieInfo (v) {
      if ((this.total - 1) % this.pageSize === 0 && this.currentPage > 1) {
        this.currentPage -= 1
      }
      const res = await deleteMovieInfo({ movieId: v })
      console.log(res)
      if (!res.success_code === 200) return this.$message.error('删除失败')
      this.$message.success('删除成功')
      this.getCurrentPageMovie(this.currentPage, this.pageSize, this.input)
    },
    // 搜索电影
    searchMovie (val) {
      this.input = val
      this.getCurrentPageMovie(this.currentPage, this.pageSize, this.input)
    },
    // 添加
    async addMovieInfo (val) {
      const res = await addMovieInfo(val)
      if (res.success_code === 200) {
        this.$message.success('添加成功')
      }
      return this.$message.error('添加失败')
    },
    // 编辑拿值给ruleForm
    updateMovieInfo (val) {
      console.log(val)
      const obj = {
        movieName: val.name,
        poster: val.poster,
        director: val.director, // 导演
        actor: val.actor, // 演员
        long: val.movie_long,
        language: val.language,
        type: val.type,
        publicDate: val.public_date,
        intro: val.intro,
        movieId: val.movie_id
      }
      this.changeRuleForm(obj)
      this.editObj = obj
    },
    // 发起修改请求
    async edit () {
      const res = await updateMovieInfo(this.editObj)
      console.log(res)
      this.getCurrentPageMovie(this.currentPage, this.pageSize, this.input)
    }
  }
}
</script>

<style>
</style>
